<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleCreate">
        添加
      </el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText">
      <el-table-column label="ID" width="40px" prop="labelId"></el-table-column>
      <el-table-column label="标签名" prop="labelName"></el-table-column>
      <el-table-column label="标签类型" prop="labelTypeShow"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click.native.prevent="handleEdit(scope.row.labelId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background :pager-count="pagerCount" :page-size="reqData.perPage" :current-page="reqData.curPage"
        layout="prev, pager, next" @current-change="pageChange" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getList
  } from "@/api/label"
  import {
    errorMsg,
    successMsg
  } from "@/utils/my"

  export default {
    inject: ["reload"],
    data() {
      return {
        reqData: {
          curPage: 1,
          perPage: 10
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        emptyText: "暂无任何数据"
      };
    },

    created() {
      this.fetchData()
    },

    methods: {

      handleCreate() {
        this.$router.push({
          path: "/admin/label/create"
        })
      },

      handleEdit(id) {
        this.$router.push({
          path: "/admin/label/edit/" + id
        })
      },

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        let that = this
        that.loading = true
        getList(that.reqData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      }

    }
  };
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
